<template>
	<view class="d-flex h-100 fenlei">
		<scroll-view scroll-y='false' class="left_wrap" scroll-top="scrollTop" s>
			<block v-for="(item,index) in goodList.lItem" :key="item.id">
				<view  @tap="leftItemTap(index)" :class="['tabItem' , index===tabIndex?'tabBg':'']" >
					{{item.text}}
				</view>
			</block>
		</scroll-view>
		<scroll-view scroll-y="true" class="right_wrap ">
				<view class="border-box  ">
					<view class="font-30 d-flex a-center j-center pt-3 mb-2">
						/<text class=" ml-1 mr-1">{{rGood.tit}}分类</text>/
					</view>
					<view class="d-flex j-center" @tap="goToGoodDetail">
						<image class="w-95" :src="rGood.imgBanner" mode="widthFix"></image>
						
					</view>
					<block v-if="rGood.list">
						<view class="row  a-center mt-3" >
							<view class="w-33 d-flex flex-column j-center a-center" v-for="(item ,index) in rGood.list" :key="index" @tap="goToGoodDetail">
								<image style="width: 100upx;" :src="item.pic" mode="widthFix"></image>
								<text class="font-30 fcolor-1">{{item.text}}</text>
							</view>
						</view>
					</block>
				</view>
		</scroll-view>
	</view>
</template>

<script>
	export default { 
		data() {
			return {
				tabIndex:0,
				scrollTop:0,
				goodList:{
					lItem:[
						{id:1,text:'衣服'},
						{id:2,text:'裤子'},
						{id:3,text:'电视'},
						{id:4,text:'手机'},
						{id:5,text:'数码'},
						{id:6,text:'食品'},
					],
					rWrap:[
						{id:1,tit:'衣服',imgBanner:'/static/images/swiper/01.jpg',list:[
							{text:'短袖',pic:'https://img.alicdn.com/imgextra/i2/106233734/O1CN017U9juR1dSDW979yfa_!!0-saturn_solar.jpg_468x468q75.jpg_.webp'},
							{text:'长袖',pic:'https://img.alicdn.com/imgextra/i1/199300019/O1CN01ir8BlF1C0kFwsGEnx_!!0-saturn_solar.jpg_468x468q75.jpg_.webp'},
							{text:'衬衫',pic:'https://img.alicdn.com/imgextra/i3/32591717/O1CN01n5uzKT1OYQgCU68lI_!!0-saturn_solar.jpg_468x468q75.jpg_.webp'},
							{text:'T恤',pic:'https://img.alicdn.com/imgextra/i4/97178548/O1CN01TcAFir2D12JDxQuMz_!!0-saturn_solar.jpg_468x468q75.jpg_.webp'},
						]},
						{id:2,tit:'裤子',imgBanner:'/static/images/swiper/02.jpg'},
						{id:3,tit:'电视',imgBanner:'/static/images/swiper/03.jpg'},
						{id:4,tit:'手机',imgBanner:'/static/images/swiper/01.jpg'},
						{id:5,tit:'数码',imgBanner:'/static/images/swiper/02.jpg'},
						{id:6,tit:'食品',imgBanner:'/static/images/swiper/03.jpg'},
					]
				},
				rGood:{},
				leftGoods:["大家电", "热门推荐", "海外购", "苏宁房产", "手机相机", "电脑办公", "厨卫电器", "食品酒水", "居家生活", "厨房电器", "生活电器", "个护健康", "烹饪厨具", "家装建材", "奶粉尿裤", "男装", "男鞋", "女装", "女鞋", "汽车生活", "运动户外", "美妆洗护", "内衣配饰", "童装玩具", "珠宝首饰", "智能设备", "钟表眼镜", "皮具箱包", "邮币乐器", "其他"]
			};
		},
		methods:{
			// 左侧列表点击事件
			leftItemTap(index) {
				console.log(index);
				this.tabIndex = index
			  this.goodList.rWrap.forEach((item)=>{
					if(item.id===index+1){
						this.rGood = item
					}
				})
				console.log(this.rGood);
			},
			// 跳转去商品详情列表
			goToGoodDetail(){
				console.log("goToGoodDetail")
				uni.navigateTo({
					url:'/pages/listGood/listGood'
				})
			},
			async getGoodsList(){
			await this.$store.dispatch('carList/handleGoodList')
			
			}
		},
		async created() {
			this.rGood=this.goodList.rWrap[0]
			await this.getGoodsList()
			let goodList = this.$store.state.carList.goodList
			console.log(goodList);
			let leftGoods = []
			goodList.forEach(item=>{
				leftGoods.push(item.cat_name)
			})
			// this.leftGoods  = leftGoods
			console.log(leftGoods);
			console.log(this.$store.state.carList.count);
		},
		onShow() {
			uniCloud.callFunction({
				name:'goodList',
				success(res) {
					console.log(res);
				}
			})
		}
		
	}
</script>

<style lang="scss">
.fenlei{
	.left_wrap{
		flex: 2;
		background-color: #f6f6f6;
		.tabItem{
			height: 40px;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.tabBg{
			position: relative;
			background-color: #FFFFFF;
			color: #b11b10;
			font-size: 1.1em;
		}
		.tabBg::before{
			content: '';
			position: absolute;
			width: 4px;
			height:50%;
			background-color: #c971d1;
			top: 25%;
			left: 0;
		}
	}
	.right_wrap{
		flex: 6;
	}
}
</style>
